<template>
  <div class="pie-chart-container" ref="chartContainer"></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      myChart: null
    }
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    colors: {
      type: Array,
      default: () => []
    }
  },
  created() {},
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.chartContainer)
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      if (this.myChart) {
        this.myChart.clear()
      }
      let option = this.getOption()
      this.myChart.setOption(option)
    },
    getOption() {
      let option = {
        // 主体图形
        /* backgroundColor: new this.$echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(255,255,255,0)'
            },
            {
              offset: 1,
              color: 'rgba(3,94,240,0.1)'
            }
          ],
          false
        ), */
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c} ({d}%)"
        },
        series: [
          {
            type: 'pie',
            selectedMode: 'single',
            radius: ['55%', '70%'],
            center: ['49%', '59%'],
            color: this.colors,
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.data
          },
          {
            type: 'pie',
            radius: ['70%', '72%'],
            center: ['49%', '59%'],
            itemStyle: {
              normal: {
                color: 'rgba(1,1,1,0)'
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 18,
                length2: 102,
                lineStyle: {
                  type: 'solid',
                  width: 1,
                  color: '#035ef0'
                }
              }
            },
            label: {
              normal: {
                padding: [-30, -110, 0],
                formatter: '{b|{b}}{d|{d}%}',
                rich: {
                  b: {
                    fontSize: 14,
                    color: '#fff',
                    fontFamily: 'HYQiHeiY2-35J',
                    align: 'left',
                    padding: 10
                  },
                  d: {
                    fontSize: 14,
                    color: '#6a6b80',
                    align: 'left',
                    fontFamily: 'Acens'
                  },
                  c: {
                    fontSize: 20,
                    color: 'red',
                    align: 'center'
                  }
                }
              }
            },
            data: this.data
          },
          {
            // 内层线
            type: 'pie',
            radius: ['53%', '53%'],
            center: ['49%', '59%'],
            itemStyle: {
              normal: {
                borderColor: '#035ef0'
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [100]
          },
          {
            // 内层线
            type: 'pie',
            radius: ['51%', '51%'],
            center: ['49%', '59%'],
            itemStyle: {
              normal: {
                borderColor: 'rgba(0,247,250,0.1)'
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [100]
          },
          {
            // 外层线
            type: 'pie',
            radius: ['72%', '72%'],
            center: ['49%', '59%'],
            itemStyle: {
              normal: {
                borderColor: '#035ef0'
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [100]
          }
        ]
      }
      return option
    }
  }
}
</script>
<style lang="scss" scoped>
.pie-chart-container {
  width: 100%;
  height: 100%;
}
</style>
